<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="email=no" />
    <meta name="wap-font-scale" content="no" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <meta name="keywords" content="页面关键字" />
    <meta name="description" content="页面描述" />
    <link href="./style/axui/css/ax.css" rel="stylesheet" type="text/css" />
    <link href="./style/css/comm.css" rel="stylesheet" type="text/css" />
    <link href="./style/css/login.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div class="loginCntent" style="background-image: url('https://adyouyi.com/assets/img/loginBackimage.png');">
        <div class="left" style="background-image: url('https://adyouyi.com/assets/img/login_left.jpg');"><img src="https://adyouyi.com/assets/img/logo.svg" alt="logo"></div>
        <div class="right">
            <div class="form"><img src="https://adyouyi.com/assets/img/Ewm.svg" alt="扫码登录" class="topLeft" onclick="switchPage()">
                <div class="loginForms">
                    <div class="user">
                        <h3>登录</h3>
                        <ul class="accontLogin">
                            <li id="login_phone">
                                <label for="userName">账户</label>
                                <div class="el-input">
                                    <input type="text" autocomplete="off" placeholder="请输入您的手机号码" class="el-input__inner" onblur="((e)=>check('userName',e))(this)">

                                </div>
                                <p class="hintText" style="display: none;"> 请输入您的手机号码</p>
                            </li>
                            <li id="login_pwd">
                                <label for="userPassword">密码</label>
                                <div class="el-input">
                                    <input type="password" autocomplete="off" placeholder="请输入密码" class="el-input__inner" onblur="((e)=>check('userPassword',e))(this)">

                                </div>
                                <p class="hintText" style="display: none;"> </p>
                            </li>
                        </ul>
                        <ul style="display: none;" class="phoneLogin">
                            <li id="code_phone"><label for="userName">手机号</label>
                                <div class="el-input">
                                    <input type="text" autocomplete="off" placeholder="请输入您的手机号码" class="el-input__inner" onblur="((e)=>check('phoneCode',e))(this)">
                                </div>
                                <p class="hintText" style="display: none;"> </p>
                            </li>
                            <li id="code_login" class="code"><label for="userCode">验证码</label>
                                <div>
                                    <div class="el-input">
                                        <input type="text" autocomplete="off" placeholder="请输入验证码" class="el-input__inner" onblur="((e)=>check('code',e))(this)">

                                    </div><button id="getCode" disabled="disabled" type="button" class="el-button el-button--primary el-button--default is-disabled" onclick="getCode()"><span>获取验证码</span></button></div>
                                <p class="hintText" style="display: none;">
                                </p>
                            </li>
                        </ul>
                        <p><span>忘记密码111?</span></p><button type="button" class="el-button el-button--primary" onclick="login()"><span>登录</span></button>
                        <div class="btnBottom">
                            <p onclick="changeLoginType()" class="codeLogin" id="flag"> 验证码登录 </p>
                            <p> 还没有账号？ <a class="" onClick="register('register')">立即注册</a></p>
                        </div>
                    </div>
                    <div class="Tencent" style="display: none;">
                        <h3>打开微信，关注公众号登录</h3>
                        <div class="qrContent"><img src="" alt="">
                            <div style="display: none;">
                                <p>点击刷新二维码</p>
                            </div>
                        </div>
                    </div>
                    <footer class="qq-wx">
                        <ul>
                            <li><img src="https://adyouyi.com/assets/img/qq.svg" alt="">
                                <p>QQ</p>
                            </li>
                            <li><img src="https://adyouyi.com/assets/img/wxqr.svg" alt="">
                                <p>微信</p>
                            </li>
                        </ul>
                    </footer>
                </div>
            </div>
            <div class="rform" style="display: none;">
                <h3>注册</h3>
                <ul>
                    <li id="reg_phone"><label for="">账户</label>
                        <div class="el-input hintInput">
                            <input type="text" autocomplete="off" placeholder="请输入您的手机号码" class="el-input__inner" onblur="((e)=>check('regPhone',e))(this)">

                        </div>
                        <p class="hintText" style=""> 请输入您的手机号码 </p>
                    </li>
                    <li id="reg_code" class="code"><label for="">验证码</label>
                        <div>
                            <div class="el-input hintInput">
                                <input type="text" autocomplete="off" placeholder="请输入验证码" class="el-input__inner" onblur="((e)=>check('regCode',e))(this)">

                            </div><button id="getRegCode" disabled="disabled" type="button" class="el-button el-button--primary is-disabled" onclick="getCode()"><span>获取验证码</span></button></div>
                        <p class="hintText" style=""> 请输入验证码 </p>
                    </li>
                    <li id="reg_pwd"><label for="">密码</label>
                        <div class="el-input hintInput">
                            <input type="password" autocomplete="off" placeholder="请输入密码" maxlength="16" class="el-input__inner" onblur="((e)=>check('regPwd',e))(this)">

                        </div>
                        <p class="hintText" style=""> 请输入密码 </p>
                    </li>
                    <li id="reg_pwds"><label for="">再次输入密码</label>
                        <div class="el-input hintInput">
                            <input type="password" autocomplete="off" placeholder="请再次输入密码" class="el-input__inner" onblur="((e)=>check('regPwds',e))(this)">
                        </div>
                        <p class="hintText" style=""> 请再次输入密码 </p>
                    </li>
                </ul>
                <button type="button" onclick="submit()" class="el-button el-button--primary register"><span>注册</span></button>
                <p> 已有账号? <a onClick="register('login')">登录</a></p>
            </div>
        </div>
        <div class="el-dialog__wrapper" id="code-dialog">
            <div class="el-dialog">
                <div class="el-dialog__header">
                    <span class="pictureCodePop-title">请完成安全校验</span>
                    <span class="el-dialog__headerbtn" onclick="closeCodeDialog()">X</span>
                </div>
                <div class="el-dialog__body">
                    <div class="pictureCodePop-content">
                        <div class="fromInput el-input">
                            <input type="text" autocomplete="off" placeholder="请输入验证码" maxlength="16" class="el-input__inner" id="dialog-code">
                            <span class="error-code">验证码错误</span>
                        </div>
                        <img id="code-dialog-img" src="">
                    </div>
                </div>
                <div class="el-dialog__footer">
                    <span class="dialog-footer">
                        <button type="button" class="el-button el-button--default" onclick="closeCodeDialog()"><span>取 消</span></button>
                        <button type="button" class="el-button el-button--primary" onclick="submitCodeDialog()"><span>确 定</span></button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="mask">
        <div class="loader">
            <div>拼命加载中ing</div>
        </div>
    </div>
    <script src="../../style/js/axui.js   " type="text/javascript"></script>
     <script src="./style/js/api.js"></script>
    <script type="text/javascript">
        function switchPage() {
            let img = document.getElementsByClassName('topLeft')[0]
            let user = document.getElementsByClassName('user')[0]
            let Tencent = document.getElementsByClassName('Tencent')[0]
            img.src = img.src == 'https://adyouyi.com/assets/img/Ewm.svg' ? 'https://adyouyi.com/assets/img/account.svg' : 'https://adyouyi.com/assets/img/Ewm.svg'
            if (img.src == 'https://adyouyi.com/assets/img/Ewm.svg') {
                user.style.display = 'block'
                Tencent.style.display = 'none'
            } else {

                user.style.display = 'none'
                Tencent.style.display = 'block'
            }

        }

        function changeLoginType() {
            let accontLogin = document.getElementsByClassName('accontLogin')[0]
            let phoneLogin = document.getElementsByClassName('phoneLogin')[0]
            let codeLogin = document.getElementsByClassName('codeLogin')[0]
            if (codeLogin.innerText == '验证码登录') {
                accontLogin.style.display = 'none'
                phoneLogin.style.display = 'block'
                codeLogin.innerText = '账户密码登录'
            } else {
                accontLogin.style.display = 'block'
                phoneLogin.style.display = 'none'
                codeLogin.innerText = '验证码登录'
            }
            document.querySelectorAll('.el-input__inner').forEach((e) => {
                e.style.border = ''
            })
            document.querySelectorAll('.hintText').forEach((e) => {
                e.style.display = 'none'
            })
        }
        const form = {
            login_phone: '',
            login_pwd: '',
            login_pwds: '',
            code: '',
            session_id:'',
        }

        function login(type) {
            const flag = document.getElementById('flag').innerText.includes('验证码')
            let testArray = []
            if (!flag) {
                testArray = [testCodePhone(form.login_phone, true), testCodeLogin(form.code, true)]

            } else {
                testArray = [testLoginPhone(form.login_phone, true), testLoginPwd(form.login_pwd, true)]
            }
            let formData={}
            let codeLogin = document.getElementsByClassName('codeLogin')[0]
            if (codeLogin.innerText == '验证码登录'){
                formData = {
                username:form.login_phone,
                password:form.login_pwd,
            }
            }else{
                formData = {
                username:form.login_phone,
                code:form.code,
            }
            }
            if (!testArray.includes(false)) {
                http().request('POST',`/user/user_login/dologin`,formData,function(res,apidomain){
                    if(res.code===1){
                        console.log('登录成功')
                        window.location.href = '/index.html'
                    }
                    if(res.code===0){
                        let placeholderDom = document.querySelector('#login_pwd p')
                        let inputDom = document.querySelector('#login_pwd input')
                        placeholderDom.innerText = '用户名或密码错误'
                        placeholderDom.style.display = 'block'
                        inputDom.style.border = '1px solid #ff4141'
                    }
                })
            }
        }

        function submit() {
            console.log('点击注册')
            let testArray = [
                testRegPhone(form.login_phone, true),
                testRegCode(form.code, true),
                testRegPwd(form.login_pwd, true),
                testRegPwds(form.login_pwds, true),
            ]
            if (!testArray.includes(false)) {
                // let formData = new FormData();
                // formData.append('username',form.login_phone)
                // formData.append('password',form.login_pwd)
                // formData.append('confirm_pass',form.login_pwds)
                // formData.append('code',form.code)
                // formData.append('service_id',form.session_id)
                let formData = {
                    username:form.login_phone,
                    password:form.login_pwd,
                    confirm_pass:form.login_pwds,
                    code:form.code,
                    service_id:form.session_id,
                }
                http().request('POST',`/user/user_register/doregister`,formData,function(res,apidomain){
                    if(res.code===1){
                        console.log('注册成功')
                        loginFrom.style.display = 'block'
                        registerFrom.style.display = 'none'
                    }
                    if(res.code===0){
                        console.log('注册失败')
                    }
                })
            }
        }

        function register(type) {
            let loginFrom = document.getElementsByClassName('form')[0]
            let registerFrom = document.getElementsByClassName('rform')[0]
            if (type === 'register') {
                loginFrom.style.display = 'none'
                registerFrom.style.display = 'block'
            } else {
                loginFrom.style.display = 'block'
                registerFrom.style.display = 'none'
            }

        }

        function testCodeLogin(value, isTestNull = false) {
            let placeholderDom = document.querySelector('#code_login p')
            let inputDom = document.querySelector('#code_login input')
            if (isTestNull) {
                if (value === '') {
                    placeholderDom.innerText = '请输入有效的验证码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            } else if (value.length != 6) {
                placeholderDom.innerText = '请输入有效的验证码'
                placeholderDom.style.display = 'block'
                inputDom.style.border = '1px solid #ff4141'
                return false
            }
            inputDom.style.border = ''
            placeholderDom.style.display = 'none'
            return true
        }

        function testCodePhone(value, isTestNull = false,input) {
            console.log("🚀 ~ file: login.html:238 ~ testCodePhone ~ input:", input)
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            let placeholderDom = document.querySelector('#code_phone p')
            let inputDom = document.querySelector('#code_phone input')
            if(!input){
                if (isTestNull) {
                if (!regMobile.test(value) || !value) {
                    placeholderDom.innerText = '请输入正确的手机号码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    document.getElementById('getCode').classList.add('is-disabled')
                    return false
                }
            } else {
                if (!regMobile.test(value) && !!value) {
                    placeholderDom.innerText = '请输入正确的手机号码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    document.getElementById('getCode').classList.add('is-disabled')
                    return false
                }
             }
            }
         
            inputDom.style.border = ''
            placeholderDom.style.display = 'none'
            // if (regMobile.test(value)) document.getElementById('getCode').classList.remove('is-disabled');
            return true
        }

        function testLoginPhone(value, isTestNull = false) {
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            let placeholderDom = document.querySelector('#login_phone p')
            let inputDom = document.querySelector('#login_phone input')
            if (isTestNull) {
                if (!regMobile.test(value) || !value) {
                    placeholderDom.innerText = '请输入正确的手机号码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            } else {
                if (!regMobile.test(value) && !!value) {
                    placeholderDom.innerText = '请输入正确的手机号码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            }
            inputDom.style.border = ''
            placeholderDom.style.display = 'none'
            return true
        }

        function testLoginPwd(value, isTestNull = false) {
            const regMobile = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g
            let placeholderDom = document.querySelector('#login_pwd p')
            let inputDom = document.querySelector('#login_pwd input')
            if (isTestNull) {
                if (!regMobile.test(value) || value === '') {
                    placeholderDom.innerText = '请输入密码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            } else {
                if (!regMobile.test(value) && !(value === '')) {
                    placeholderDom.innerText = '请输入密码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            }
            inputDom.style.border = ''
            placeholderDom.style.display = 'none'
            return true
        }

        function testRegPhone(value, isTestNull = false) {
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            let placeholderDom = document.querySelector('#reg_phone p')
            let inputDom = document.querySelector('#reg_phone input')
            if (isTestNull) {
                if (!regMobile.test(value) || value === '') {
                    placeholderDom.innerText = '请输入正确的手机号码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    document.getElementById('getRegCode').classList.add('is-disabled')
                    return false
                }
            } else {
                if (!regMobile.test(value) && !(value === '')) {
                    placeholderDom.innerText = '请输入正确的手机号码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    document.getElementById('getRegCode').classList.add('is-disabled')
                    return false
                }
            }
            inputDom.style.border = ''
            placeholderDom.style.display = 'none'
            if (regMobile.test(value)) {
                document.getElementById('getRegCode').classList.remove('is-disabled');
                document.getElementById('getRegCode').disabled = false;
            }
            return true
        }

        function testRegCode(value, isTestNull = false) {
            let placeholderDom = document.querySelector('#reg_code p')
            let inputDom = document.querySelector('#reg_code input')
            if (isTestNull) {
                if (value === '') {
                    placeholderDom.innerText = '请输入有效的验证码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            } else if (value.length != 6) {
                placeholderDom.innerText = '请输入有效的验证码'
                placeholderDom.style.display = 'block'
                inputDom.style.border = '1px solid #ff4141'
                return false
            }
            inputDom.style.border = ''
            placeholderDom.style.display = 'none'
            return true
        }

        function testRegPwd(value, isTestNull = false) {
            const regMobile = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g
            let placeholderDom = document.querySelector('#reg_pwd p')
            let inputDom = document.querySelector('#reg_pwd input')
            if (isTestNull) {
                if (!regMobile.test(value) || value === '') {
                    placeholderDom.innerText = '请输入密码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            } else {
                if (!regMobile.test(value) && !(value === '')) {
                    placeholderDom.innerText = '请输入密码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            }
            inputDom.style.border = ''
            placeholderDom.style.display = 'none'
            return true
        }

        function testRegPwds(value, isTestNull = false) {
            let placeholderDom = document.querySelector('#reg_pwds p')
            let inputDom = document.querySelector('#reg_pwds input')
            if (isTestNull) {
                if (value === '' || form.login_pwd !== form.login_pwds) {
                    placeholderDom.innerText = '请输入密码'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                    return false
                }
            } else if ((value !== '') && (form.login_pwd != form.login_pwds)) {
                placeholderDom.innerText = '请输入密码'
                placeholderDom.style.display = 'block'
                inputDom.style.border = '1px solid #ff4141'
                return false
            }
            inputDom.style.border = ''
            placeholderDom.style.display = 'none'
            return true
        }

        function check(type, e,input) {
            console.log("🚀 ~ file: login.html:479 ~ check ~ type, e,input:", type, e,input)
            if (type == 'userName') {
                form.login_phone = e.value
                testLoginPhone(e.value,false,input)
                const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
                if(regMobile.test(form.login_phone)){
                    isExistMobile()
                }
            }
            if (type == 'userPassword') {
                form.login_pwd = e.value
                testLoginPwd(e.value)
            }
            if (type == 'phoneCode') {
                form.login_phone = e.value
                testCodePhone(e.value,false,input)
                const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
                if(regMobile.test(form.login_phone)){
                    isExistMobile('register')
                }
                

            }
            if (type == 'code') {
                form.code = e.value
                testCodeLogin(e.value)
            }
            if (type == 'regPhone') {
                form.login_phone = e.value
                testRegPhone(e.value)
            }
            if (type == 'regCode') {
                form.code = e.value
                testRegCode(e.value)
            }
            if (type == 'regPwd') {
                form.login_pwd = e.value
                testRegPwd(e.value)
            }
            if (type == 'regPwds') {
                form.login_pwds = e.value
                testRegPwds(e.value)
            }
        }
        
        function getCode(){
            console.log('获取验证码')
            document.querySelector('#code-dialog').style.display = 'block'
            http().request('GET',`/portal/captcha/getPhpSessionId?_=${new Date().valueOf()}`,{},function(res,apidomain){
                form.session_id = res.data.session_id;
                getCheckCaptcha(apidomain)
            })
        }

        function getCheckCaptcha(apidomain){
            const url = apidomain + `/portal/captcha/getCaptcha?session_id=${form.session_id}`
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = "blob"; //关键的一步
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var blod = this.response;
                        var src = URL.createObjectURL(blod);
                        document.querySelector('#code-dialog-img').src = src
                    }
                }
            };
            xhr.send();
        }

        function closeCodeDialog(){
            document.querySelector('#code-dialog').style.display = 'none'
            document.querySelector('#dialog-code').value = ''
        }

        function sendMobileSMS(){
            http().request('POST',`/user/user_tool/sendMobileSMS`,{
                phone:form.login_phone
            },function(res,apidomain){
                if(res.code===1){
                    console.log('验证码发送成功')
                    closeCodeDialog()
                }
            })
        }

        function submitCodeDialog(){
            let code = document.querySelector('#dialog-code').value;
            let phone = form.login_phone;
            let session_id = form.session_id;
            http().request('GET',`/portal/captcha/checkCaptcha?code=${code}&phone=${phone}&session_id=${session_id}`,{},function(res,apidomain){
                if(res.code===0){
                    document.querySelector('#dialog-code').style.border = '1px solid red'
                    document.querySelector('.error-code').style.display = 'block'
                    getCheckCaptcha(apidomain)
                }
                if(res.code===1){
                    sendMobileSMS()
                }
            })
        }

    </script>
    <script type="text/javascript">
        const params = new URLSearchParams(location.search)
        if (params.get('type') === 'reg') {
            let loginFrom = document.getElementsByClassName('form')[0]
            let registerFrom = document.getElementsByClassName('rform')[0]
            loginFrom.style.display = 'none'
            registerFrom.style.display = 'block'
        }
        function isExistMobile(type){
            console.log('skdfsdf',form.login_phone)
            let params = {
                mobile: form.login_phone
            }
          http().request('post','/user/user_register/isExistMobile',params,function(res){
            let placeholderDom = document.querySelector('#login_phone p')
            let inputDom = document.querySelector('#login_phone input')
            // 该手机号已经注册
            if(res.data.isExist){
                if(type){
                    placeholderDom.innerText = ''
                    placeholderDom.style.display = 'none'
                    inputDom.style.border = '1px solid #dcdfe6'
                    document.getElementById('getCode').classList.remove('is-disabled')
                    document.getElementById('getCode').disabled = false;
                }
            }else{
                if(type){
                    document.getElementById('getCode').classList.remove('is-disabled')
                    document.getElementById('getCode').disabled = false;
                }else{
                    placeholderDom.innerText = '该账号未注册请前往注册'
                    placeholderDom.style.display = 'block'
                    inputDom.style.border = '1px solid #ff4141'
                }
          
            }
          },function(res){
          console.log("🚀 ~ file: login.html:474 ~ http ~ res:", res)

        })
        }
     
    </script>
</body>

</html>